<template>
  <div class="Imgbox">
    <!--    <img :src="item" alt=""> //这种情况下渲染时会发送网络请求加你的本地地址所以渲染不出来 -->
    <!-- <img :src="item" alt="">  -->
    <img
      :class="{ active: indexFlag == index }"
      v-for="(item, index) in imgPath"
      :key="index"
      :src="item.img"
      alt=""
      @click="handleImg(item, index)"
    />
  </div>
</template>

<script>
export default {
  props: {
    imgPath: Array,
    indexFlag: Number,
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    handleImg(item, index) {
      this.$emit("handleImg", item);
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.Imgbox {
  width: 100vw;
  height: 120px;
  display: flex;
  align-items: center;
  img {
    width: 84px;
    height: 84px;
    margin-left: 5px;
  }
  .active {
    border: 3px solid rgb(223, 26, 26);
  }
}
</style>
